<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>个人设置</title>
<link type="text/css" href="__CSS__/main.css" rel="stylesheet"/>
<script type="text/javascript" src="__PUBLIC_JS__/jquery.js?v={$src_version}" ></script>
<script type="text/javascript" src="__PUBLIC__/layer_mobile/layer.js" ></script>  
<link type="text/css" href="__CSS__/wild.css?v={$src_version}" rel="stylesheet"/>
<style>
   .modify-info-item{
    padding: 10px;
   
   } 
   .modify-info-item span{float: left;width: 25%; text-align:right;height: 25px;line-height: 25px;}
   .modify-info-item div{display: inline-block;width: 63%;text-align: left;}
   .modify-info-item div input{width: 90%;height: 25px;outline: none;border: 1px solid #999;padding-left: 1%;}
   .modify-info-item div input[type="radio"]{width: 40%;vertical-align: top;margin-left: 5%}
   .modify-info-item div input[type="radio"] + label::before {content: "\a0";display: inline-block;vertical-align: middle;font-size: 18px;width: 16px;height: 16px;margin-right: 1%;border-radius: 50%;border: 1px solid #83a500;line-height: 1;}
    .modify-info-item div input[type="radio"]:checked + label::before { background-color: #83a500;background-clip: content-box;padding: 2px;}
    .modify-info-item div input[type="radio"] {position: absolute;margin-top: 2px;opacity: 0;}
   .light{top:30%}
  
</style>
</head> 
<body>
    <div class="reback"><img src="__IMG__/reback.svg" onclick="javascript:history.back(-1);"></div>
    <div class="setting_head">
        <if condition="$user['headimgurl'] neq ''"><img src="/{$user.headimgurl}" /><else /><img src="__IMG__/setting/setting_head.png" />
        </if><p>{$user.realname}</p>
    </div>
    <div class="setting-box">
        <div class="setting-item-special">基本信息</div>
        <a class="modify-special" href="javascript:;">
            <div class="setting-item"> 
                <span>姓名</span>
                <span class="right">{$uinfo.realname}</span>
            </div>
        </a>
        <a class="modify-special" href="javascript:;">
            <div class="setting-item">
                <span>电话</span>
                <span class="right">{$uinfo.mobile}</span>
            </div>
        </a>
        <a class="modify-special" href="javascript:;">
            <div class="setting-item">
                <span>性别</span>
                <span class="right">{$uinfo['sex']?'男':'女'}</span>
            </div>
        </a>
        <a class="modify-special" href="javascript:;">
            <div class="setting-item">
                <span>生日</span>
                <span class="right">{$uinfo.birthday}</span>
            </div>
        </a>
        <div class="setting-item-special">密码设置</div>
        <a href="{:U('User/upwd')}">
            <div class="setting-item">
                <span>更改密码</span>
            </div>
        </a>
        <div class="btn-group setting-btn">
            <div class="btn btn-white"><a href="{:U('User/login_out')}">退出登录</a></div>
        </div>
    </div>
    <div id="modify-info" class="light" style="display: none">
        <div class="top_wz">基本信息修改</div>
        <form id="modify-form" action="" >
            <input type="number" name="uid" id="uid" value="{$uinfo.uid}" style="display: none;" />
            <div class="modify-info-item">
                <span>姓名：</span>
                <div>
                    <input type="text" name="realname" id="realname" value="{$uinfo.realname}" />
                </div>
            </div>
            <div class="modify-info-item">   
                <span>电话号码：</span>
                <div>
                    <input type="number" name="mobile" id="mobile" value="{$uinfo.mobile}" />
                </div>
            </div>
            <div class="modify-info-item">
                <span>性别：</span>
                <div>
                    <!-- <input type="text" name="sex" id="sex" value="{$uinfo.sex}" /> -->
                    <span style="text-align: left;position: relative;"><input class="radio" type="radio" name="sex" id="" value="0" <if condition="$uinfo.sex eq 0">checked</if> /><label>女</label></span>
                    <span style="text-align: left;position: relative;"><input class="radio" type="radio" name="sex" id="" value="1" <if condition="$uinfo.sex eq 1">checked</if> /><label>男</label></span>
                </div>
            </div>
            <div class="modify-info-item">
                <span>生日：</span>
                <div>
                    <input type="date" name="birthday" id="birthday" value="{$uinfo.birthday}" />
                </div>
            </div>
            <ul class="xz_li">
                <li class="h_li"><a href="javascript:void(0)" id="del">取消</a></li>
                <li class="b_li"><a id="submit" value="" style="color:#83a500">确认修改</a></li>
            </ul>
            <!-- <li><input type="submit" value="确认修改" /></li> -->
        </form>
    </div>
</body>
</html>
<script>
$('.setting-box').on('click','.modify-special',function(){
    $('#modify-info').css('display','block');
})
$('.xz_li').on('click','#submit',function(){
    $('#modify-info').css('display','none');
    $.ajax({
        type: "GET",
        data:{
            uid:$('#uid').val(),
            realname:$('#realname').val(),
            mobile:$('#mobile').val(),
            sex:$("input[name='sex']:checked").val(),
            birthday:$('#birthday').val()
        },
        url: "{:U('User/change_info')}",
        success:function(res){
             layer.open({ content: res,skin: 'msg',time: 2 });
             location.reload();
        }
    })
})
$('.xz_li').on('click','#del',function(){
    $('#modify-info').css('display','none');
})
    
</script>